<template>
  <div id="AutoDiscover">
    <ReturnPage />

    <el-card class="mt10">
      <!-- 搜索条件 -->
      <el-form
        :inline="true"
        :model="query"
        class="demo-form-inline"
        size="mini"
        ref="query"
      >
        <el-form-item label="名称" prop="search.name">
          <el-input
            class="mr10"
            v-model="query.search.name"
            size="mini"
            placeholder="请输入名称"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="filter.status">
          <el-radio-group v-model="query.filter.status">
            <el-radio-button :label="null">任何</el-radio-button>
            <el-radio-button :label="0">已启用</el-radio-button>
            <el-radio-button :label="1">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            class="ml10"
            size="mini"
            type="primary"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            class="ml10"
            size="mini"
            type="warning"
            plain
            @click="
              resetForm('query');
              getListData();
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-button size="mini" type="primary" @click="dialogVisible = true"
        >新增</el-button
      >
      <!-- 列表 -->
      <el-table
        class="mt20"
        :data="tableData"
        style="width: 100%"
        :cell-style="cellStyle"
        height="calc(100vh - 290px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="left" />
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="iprange" label="Ip范围" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="delay"
          label="间隔"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="dchecks" label="检查" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.dchecks[0].type | getType
          }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == 0 ? 'success' : 'danger'"
              size="mini"
              >{{ scope.row.status == 0 ? "启用" : "停用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="changeStatus(scope.row.druleid, '0')"
              :disabled="scope.row.status == 0"
              >启用</el-button
            >
            <el-button
              size="mini"
              @click="changeStatus(scope.row.druleid, '1')"
              :disabled="scope.row.status == 1"
              >停止</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="delAutoDiscover(scope.row.druleid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增表单 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeDialog('form')"
    >
      <div class="form_box">
        <el-form
          :rules="rules"
          label-width="145px"
          ref="form"
          :model="form"
          size="mini"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入发现规则的名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="IP范围" prop="iprange">
            <el-input
              v-model="form.iprange"
              placeholder="请输入需要发现的IP地址范围"
            ></el-input>
          </el-form-item>
          <el-form-item label="更新间隔" prop="delay">
            <el-select v-model="form.delay" placeholder="请选择更新间隔">
              <el-option value="30s" label="30s"></el-option>
              <el-option value="1m" label="1m"></el-option>
              <el-option value="2h" label="2h"></el-option>
              <el-option value="1d" label="1d"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查类型" prop="type">
            <el-select v-model.number="form.type" placeholder="请选择检查类型">
              <el-option :value="9" label="agent 客户端"></el-option>
              <el-option :value="13" label="SNMPv3 客户端"></el-option>
              <el-option :value="11" label="SNMPv2 客户端"></el-option>
              <!-- <el-option :value="0" label="SSH"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item
            label="端口"
            prop="ports"
            v-if="form.type || form.type == 0"
          >
            <el-input
              v-model.number="form.ports"
              placeholder="请输入端口"
              disabled
            ></el-input>
          </el-form-item>
          <!-- 选择zabbix客户端出现 -->
          <el-form-item label="键值" prop="key_" v-if="form.type == 9">
            <el-input v-model="form.key_" placeholder="请输入键值"></el-input>
          </el-form-item>
          <!-- 选择snmp v2客户端出现 -->
          <el-form-item
            label="SNMP community"
            prop="snmp_community"
            v-if="form.type == 11"
          >
            <el-input
              v-model="form.snmp_community"
              placeholder="请输入SNMP community"
            ></el-input>
          </el-form-item>
          <!-- 选择snmp v3客户端出现 -->
          <el-form-item
            label="SNMP OID"
            prop="key_"
            v-if="form.type == 13 || form.type == 11"
          >
            <el-input
              v-model="form.key_"
              placeholder="请输入SNMP OID"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="上下文名称"
            prop="snmpv3_contextname"
            v-if="form.type == 13"
          >
            <el-input
              v-model="form.snmpv3_contextname"
              placeholder="请输入上下文名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="安全名称"
            prop="snmpv3_securityname"
            v-if="form.type == 13"
          >
            <el-input
              v-model="form.snmpv3_securityname"
              placeholder="请输入安全名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="安全级别"
            prop="snmpv3_securitylevel"
            v-if="form.type == 13"
          >
            <el-select
              v-model="form.snmpv3_securitylevel"
              placeholder="请选择安全级别"
            >
              <el-option value="0" label="noAuthNoPriv"></el-option>
              <el-option value="1" label="authNoPriv"></el-option>
              <el-option value="2" label="authPriv"></el-option>
            </el-select>
          </el-form-item>
          <!-- 安全级别选择 ：authNoPriv 出现 -->
          <el-form-item
            label="验证协议"
            prop="snmpv3_authprotocol"
            v-if="
              form.type == 13 &&
              (form.snmpv3_securitylevel == 1 || form.snmpv3_securitylevel == 2)
            "
          >
            <el-select
              v-model="form.snmpv3_authprotocol"
              placeholder="请选择验证协议"
            >
              <el-option value="0" label="MD5"></el-option>
              <el-option value="1" label="SHA1"></el-option>
              <el-option value="2" label="SHA224"></el-option>
              <el-option value="3" label="SHA256"></el-option>
              <el-option value="4" label="SHA384"></el-option>
              <el-option value="5" label="SHA512"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="验证口令"
            prop="snmpv3_authpassphrase"
            v-if="
              form.type == 13 &&
              (form.snmpv3_securitylevel == 1 || form.snmpv3_securitylevel == 2)
            "
          >
            <el-input
              v-model="form.snmpv3_authpassphrase"
              placeholder="请输入验证口令"
            ></el-input>
          </el-form-item>
          <!-- 安全级别选择 : authPriv 出现 -->
          <el-form-item
            label="隐私协议"
            prop="snmpv3_privprotocol"
            v-if="form.type == 13 && form.snmpv3_securitylevel == 2"
          >
            <el-select
              v-model="form.snmpv3_privprotocol"
              placeholder="请选择隐私协议"
            >
              <el-option value="0" label="DES"></el-option>
              <el-option value="1" label="AES128"></el-option>
              <el-option value="2" label="AES192"></el-option>
              <el-option value="3" label="AES256"></el-option>
              <el-option value="4" label="AES192C"></el-option>
              <el-option value="5" label="AES256C"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="私钥"
            prop="snmpv3_privpassphrase"
            v-if="form.type == 13 && form.snmpv3_securitylevel == 2"
          >
            <el-input
              v-model="form.snmpv3_privpassphrase"
              placeholder="请输入私钥"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')" size="mini"
          >添 加</el-button
        >
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAutoDiscoverList_Api, //自动发现检查列表页面
  addAutoDiscover_Api, //新增自动发现动作
  changeAutoDiscoveStatus_Api, //修改发现规则状态
  delAutoDiscove_Api, //删除自动发现
} from "@/api/automated/autoDiscover.js";
export default {
  data() {
    return {
      dialogVisible: false, //控制新增表单显示隐藏
      //查询条件
      query: {
        selectDChecks: "extend",
        search: {
          name: null, //模糊查询名称
        },
        filter: {
          status: null, //状态
        },
      },
      multipleSelection: [], //多选
      //表格数据
      tableData: [],
      //自动发现检查表单
      form: {
        name: null, //规则名称
        iprange: null, //ip范围
        delay: null, //更新间隔
        snmp_community: null,
        type: null, //检查类型
        ports: null, //端口
        /////////zabbix客户端
        // key_: null, //键值
        /////////SNMPv3 客户端
        key_: "1.3.6.1.2.1.1.5.0", //SNMP OID
        snmpv3_contextname: null, //上下文名称
        snmpv3_securityname: null, //安全名称
        snmpv3_securitylevel: null, //安全级别
        snmpv3_authprotocol: null, //验证协议
        snmpv3_authpassphrase: null, //验证口令
        snmpv3_privprotocol: null, //隐私协议
        snmpv3_privpassphrase: null, //私钥
      },
      //验证规则
      rules: {
        //名称
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        iprange: [{ required: true, message: "请输入ip范围", trigger: "blur" }],
        snmp_community: [
          { required: true, message: "请输入snmp community", trigger: "blur" },
        ],
        //端口范围
        ports: [
          {
            required: true,
            message: "请输入端口",
            trigger: "blur",
          },
          {
            type: "number",
            trigger: "blur",
            message: "端口格式错误",
          },
        ],
        //键值
        // key_: [{ required: true, message: "请输入键值", trigger: "blur" }],
        //snmp oid
        key_: [{ required: true, message: "不能为空", trigger: "blur" }],
        type: [
          { required: true, message: "请选择检查类型", trigger: "change" },
        ],
        //私钥
        snmpv3_privpassphrase: [
          { required: true, message: "请输入私钥", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //获取数据
    getListData() {
      getAutoDiscoverList_Api(this.query).then((res) => {
        this.tableData = res.data;
      });
    },
    //改变自动发现状态
    changeStatus(id, state) {
      changeAutoDiscoveStatus_Api({ druleid: id, status: state }).then(
        (res) => {
          this.$message.success(res.msg);
          this.getListData();
        }
      );
    },
    //删除自动发现
    delAutoDiscover(id) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delAutoDiscove_Api(id).then((res) => {
            this.$message.success(res.msg);
            this.getListData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //搜索
    handleQuery() {
      this.getListData();
    },
    //表格id样式
    cellStyle({ column, columnIndex }) {
      // 状态列字体颜色
      if (columnIndex === 1) {
        return "color: #46a6ff;cursor:pointer;";
      }
    },
    //提交表单
    submitForm(formName) {
      //删除不需要的参数
      const tempObj = this.deleteObjectItem(this.form);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addAutoDiscover_Api(tempObj)
            .then((res) => {
              this.$message.success("添加成功");
              this.getListData();
              this.resetForm("form");
              this.dialogVisible = false;
            })
            .catch((err) => {
              this.$message.error("添加失败");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //关闭弹窗
    closeDialog(formName) {
      this.$refs[formName].resetFields();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {},
    //提交表单之前，删除不需要的项
    deleteObjectItem({ ...object }) {
      if (object.type == 9) {
        //检查类型为zabbix ，删除snmpv3 和 SSH
        // delete object.key_;
        delete object.snmpv3_contextname;
        delete object.snmpv3_securityname;
        delete object.snmpv3_securitylevel;
        delete object.snmpv3_authprotocol;
        delete object.snmpv3_authpassphrase;
        delete object.snmpv3_privprotocol;
        delete object.snmpv3_privpassphrase;
        delete object.snmp_community;
      } else if (object.type == 13) {
        delete object.snmp_community;
        //检查类型为snmpv3 删除zabbix和ssh
        // delete object.key_;
      } else if (object.type == 11) {
        delete object.snmpv3_contextname;
        delete object.snmpv3_securityname;
        delete object.snmpv3_securitylevel;
        delete object.snmpv3_authprotocol;
        delete object.snmpv3_authpassphrase;
        delete object.snmpv3_privprotocol;
        delete object.snmpv3_privpassphrase;
      } else {
        //检查类型为ssh ， 删除snmpv3和zabbix
        delete object.snmp_community;
        delete object.key_;
        delete object.snmpv3_contextname;
        delete object.snmpv3_securityname;
        delete object.snmpv3_securitylevel;
        delete object.snmpv3_authprotocol;
        delete object.snmpv3_authpassphrase;
        delete object.snmpv3_privprotocol;
        delete object.snmpv3_privpassphrase;
        //zabbix
        // delete object.key_;
      }
      const tempObj = {
        name: object.name,
        iprange: object.iprange,
        delay: object.delay,
        dchecks: [],
      };
      delete object.name;
      delete object.iprange;
      delete object.delay;
      tempObj.dchecks.push(object);
      return tempObj;
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.getListData(); //获取列表数据
  },
  filters: {
    //过滤检查类型
    getType(val) {
      switch (val) {
        case "9":
          return "Zabbix 客户端";
        case "13":
          return "SNMPv3 客户端";
        case "0":
          return "SSH";
        case "1":
          return "LDAP";
        case "2":
          return "SMTP";
        case "3":
          return "FTP";
        case "4":
          return "HTTP";
        case "5":
          return "POP";
        case "6":
          return "NNTP";
        case "7":
          return "IMAP";
        case "8":
          return "TCP";
        case "10":
          return "SNMPv1 agent";
        case "11":
          return "SNMPv2 agent";
        case "12":
          return "ICMP ping";
        case "14":
          return "HTTPS";
        case "15":
          return "Telnet";
      }
    },
  },
  watch: {
    "form.type": {
      handler(newVal) {
        if (newVal == 9) {
          this.form.ports = 10050;
          this.form.key_ = "system.uname";
        } else if (newVal == 0) {
          this.form.ports = 22;
          this.form.key_ = "";
        } else if (newVal == 13) {
          this.form.ports = 161;
          this.form.key_ = "1.3.6.1.2.1.1.5.0";
        } else if (newVal == 11) {
          this.form.ports = 161;
          this.form.key_ = "1.3.6.1.2.1.1.5.0";
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.form_box {
  width: 100%;
  box-sizing: border-box;
  padding-right: 50px;
  max-height: calc(100vh - 300px);
  overflow-y: scroll;

  &::-webkit-scrollbar-track {
    background-color: #ffffff;
  }
}
</style>